<template>
	<view class="register">
		<view class="logo"><image src="/static/images/logo.png" mode=""></image></view>

		<!-- <view class="passwordlogo">
			<text v-for="(item, index) in logoList" :key="index" :class="{ logoColor: logoColorIndex === index }" @click="cutLogoWay(index)">{{ item.text }}</text>
		</view> -->

		<!-- 密码登录 -->
		<view class="information">
			<view class="public">
				<image src="/static/images/mobile.png"></image>
				<input type="text" placeholder="输入手机号码" v-model="account" required />
			</view>
			<view v-if="logoColorIndex === 0" class="public">
				<image src="/static/images/password.png"></image>
				<input type="password" placeholder="填写密码" class="codeIput" v-model="password" required />
			</view>

			<!-- 验证码登录 -->
			<!-- <view v-if="logoColorIndex === 1" class="public">
				<image src="/static/images/password.png"></image>
				<input type="text" placeholder="填写验证码" class="codeIput" v-model="captcha" />
				<button v-if="isCountDownShow" class="getAuthCode">{{ remaining }}秒</button>
				<button v-else class="getAuthCode" @click="code">获取验证码</button>
			</view> -->
		</view>

		<view class="logoButton" ><button class="loginTo" @click="loginHandler">登录</button></view>

		<view class="operate">
			<!-- 登录页面 -->
			<navigator url="/pages/forget/forget" open-type="redirect" hover-class="navigator-hover">
				<view class="forgetPwd">忘记密码?</view>
			</navigator>
			<view class="register">
				<text>没有账号?</text>
				<navigator url="/pages/register/register" open-type="redirect" hover-class="navigator-hover">
					<text class="promptly">立即注册</text>
				</navigator>
			</view>
		</view>		
	</view>
</template>



<script>
	import {
		baseUrl
	} from '@/config/config.js';
	import {
		goBack,
		jumpBackPage
	} from '@/config/mixins.js';
	export default {
		mixins: [goBack, jumpBackPage],
		data() {
			return {
				logoList: [
					{
						text: '密码登录'
					},
					{
						text: '验证码登录'
					}
				],
				logoColorIndex: 0,
				current: 1,
				account: '',
				password: '',
				formItem: 1,
				type: 'login',
				logoUrl: '',
				keyCode: '',
				codeUrl: '',
				codeVal: '',
				isShowCode: false,
				isCountDownShow:false,// 验证码显示
				remaining: 60, //显示剩余时间
				showMask:true,
			};
		},
		onLoad(options) {
			if (options.spread) {
				this.$db.set('spread', options.spread);
			}
			// 判断浏览器环境
			this.weixinBrowser = this.$common.isWeiXinBrowser();
		},
		onShow() {
			if (this.$db.get('userToken')) {
				uni.switchTab({
					url: '/pages/index/index'
				});
			}
		},
		//返回按钮
		onBackPress() {  
		   if(this.showMask) {  
			 this.showMask = false;  
			 return true;  
		   }else{  
			  uni.showModal({  
				title: '提示',  
				content: '是否退出APP？',  
				success: function(res) {  
					if (res.confirm) {  
						// 退出当前应用，改方法只在App中生效  
						plus.runtime.quit();  
					} else if (res.cancel) {  
						// console.log('用户点击取消');  
					}  
				}  
			  });  
			  return true  
		   }  
		},
		computed: {
			// 动态更改登录按钮bg
			loginButtonClass() {
				return this.mobile && this.mobile.length > 0 && this.pwd ? this.btnb + ' btn-b' : this.btnb;
			},
			logoImage() {
				return this.$store.state.config.site_logo;
			},
			getThirdLoginImg(key) {
				return key => {
					if (key == 'Wxofficial') {
						return '/static/image/ic-wechat.png';
					} else if (key == 'weixin') {
						return '/static/image/ic-wechat.png';
					}
				};
			}
		},
		methods: {
			// 验证手机号
			rightMobile() {
				let res = {};
				if (!this.account.trim()) {
					res.status = false;
					res.msg = '请输入手机号';
				} else if (!/^1[3456789]{1}\d{9}$/gi.test(this.account.trim())) {
					res.status = false;
					res.msg = '手机号格式不正确';
				} else if (!this.password.trim()) {
					res.status = false;
					res.msg = '请输入密码';
				} else {
					res.status = true;
				}
				return res;
			},
			// 登录处理
			loginHandler() {
				if (!this.rightMobile().status) {
					this.$common.errorToShow(this.rightMobile().msg);
				} else {
					this.toLogin();
				}
			},
			// 获取验证码图片地址
			getCaptchaUrl() {
				this.captchaUrl = this.$config.apiBaseUrl + 'captcha.html';
			},
			getCodeImg() {
				let num = Math.ceil(Math.random() * 1000);
				this.captchaUrl = this.$config.apiBaseUrl + 'captcha.html?' + num;
			},
			// 去注册
			toReg() {
				this.$common.redirectTo('/pages/login/register/index');
			},
			// 去登录
			toLogin() {
				let data = {
					account: this.account,
					password: this.password
				}; 
				if (this.isCaptcha) {
					data.captcha = this.captcha;
				}

				// 获取邀请码
				let spread = this.$db.get('spread');
				if (spread) {
					data.spread = spread;
				}
				this.$api.login(data, res => {
					if (res.status==200) { 
						this.$db.set('userToken', res.data);
						this.$db.set('userId', res.data.user.uid);
						this.redirectHandler();
					} else {
						this.$common.errorToShow(res.message);
					}
				});
			},
			// 重定向跳转 或者返回上一个页面
			redirectHandler() {
				this.$db.del('spread');
				this.handleBack();
			},
			// 登录方式切换
			selectLoginType() {
				this.$common.redirectTo('/pages/login/login/index');
			},
			// 获取第三方登录列表
			getAuths() {
				let data = {
					url: baseUrl + 'wap/pages/author'
				};
				this.$api.getTrustLogin(data, res => {
					if (res.status) {
						this.thirdPartyLogins = res.data;
					}
				});
			},
			// 第三方登录授权
			handleThirdLogin(url) {
				this.$common.redirectTo('');
				let redirect = this.$store.state.redirectPage;
				// console.log("第三方登录vuex"+redirect);
				this.$db.set('redirectPage', redirect);
				// console.log("第三方登录本地存储"+this.$db.get('redirectPage'));
				window.location.href = url;
			},
			//获取APP信任登录
			getAppAuths() {
				let _this = this;
				_this.thirdPartyLogins = [];
				uni.getProvider({
					service: 'oauth',
					success: function(res) {
						if (res.errMsg == 'getProvider:ok') {
							_this.thirdPartyLogins = res.provider;
						}
					}
				});
			},
			//app第三方登录
			handleThirdLoginApp(type) {
				uni.showLoading({
					title: '加载中'
				});
				let _this = this;
				uni.login({
					provider: type,
					success: function(loginRes) {
						// 获取用户信息
						uni.getUserInfo({
							provider: type,
							success: function(infoRes) {
								if (infoRes.errMsg == 'getUserInfo:ok') {
									var data = {
										user: infoRes.userInfo,
										type: type
									};
									var invitecode = _this.$db.get('invitecode');
									if (invitecode) {
										data.invitecode = invitecode;
									}
									_this.$api.appTrustLogin(data, res => {
										uni.hideLoading();
										if (res.status) {
											//判断是否返回了token，如果没有，就说明没有绑定账号，跳转到绑定页面
											if (typeof res.data.token == 'undefined') {
												uni.redirectTo({
													url: '/pages/login/login/index?user_wx_id=' + res.data.user_wx_id
												});
											} else {
												//登陆成功，设置token，并返回上一页
												_this.$db.set('userToken', res.data.token);
												uni.navigateBack({
													delta: 1
												});
												return false;
											}
										} else {
											_this.$common.errorToShow('登录失败，请重试');
										}
									});
								} else {
									uni.hideLoading();
									_this.$common.errorToShow('登录失败，请重试');
								}
							}
						});
					}
				});
			},
			// 跳转到用户协议
			goAgreement() {
				let articleId = this.$store.state.config.user_agreement_id;
				this.$common.navigateTo('/pages/article/index?id_type=1&id=' + articleId);
			},
			// 跳转到隐私政策
			goPrivacy() {
				let articleId = this.$store.state.config.privacy_policy_id;
				this.$common.navigateTo('/pages/article/index?id_type=1&id=' + articleId);
			},
			goForgetpwd() {
				this.$common.navigateTo('/pages/login/forget/forget');
			}
		}
	};
</script>

<style lang="less">
page {
	background-color: #ffffff;
}
.register {
	width: 100%;
	height: 100%;
	.logo {
		background-color: #ffffff;
		text-align: center;
		padding-top: 167rpx;
		image {
			width: 230rpx;
			height: 266rpx;
		}
	}
	.passwordlogo {
		background-color: #ffffff;
		font-size: 30rpx;
		height: 60rpx;
		text-align: center;
		text {
			display: inline-block;
			width: 232rpx;
			height: 100%;
		}
		.logoColor {
			color: #e25a29;
			border-bottom: 5rpx solid #e25a29;
		}
	}

	.information {
		background-color: #ffffff;
		padding: 20rpx 100rpx;
		.public {
			width: 550rpx;
			height: 132rpx;
			line-height: 132rpx;
			border-bottom: 2rpx solid #dcdcdc;
			padding-top: 15rpx;
			display: flex;
			align-items: center;
			position: relative;
			.getAuthCode {
				position: absolute;
				top: 50%;
				right: 0;
				transform: translateY(-50%);
				display: inline-block;
				font-size: 24rpx;
				color: #e25b29;
				background-color: #ffd7c7;
				width: 150rpx;
				height: 60rpx;
				border-radius: 30px;
				line-height: 60rpx;
				overflow: hidden;
			}
			image {
				width: 24rpx;
				height: 34rpx;
				margin-right: 20rpx;
				margin-bottom: 5rpx;
			}
			input {
				font-size: 30rpx;
				font-family: PingFangSC-Medium,PingFang SC;
				font-weight: 500;
				color: #333;
				line-height: 42rpx;
			}
		}
		

	}
	.logoButton {
		background-color: #ffffff;
		padding: 35rpx 100rpx;
		.loginTo {
			width: 549rpx;
			height: 76rpx;
			text-align: center;
			line-height: 76rpx;
			color: #ffffff;
			border-radius: 38rpx;
			background: linear-gradient(to right, #f4a323, #e25a29);
		}
	}
	.operate {
		background-color: #ffffff;
		padding: 0 100rpx;
		navigator {
			display: inline-block;
		}
		.forgetPwd {
			color: #e25a29;
			display: inline;
			margin-right: 180rpx;
		}

		.register {
			display: inline;
			text {
				background-color: #ffffff;
			}
			.promptly {
				color: #e25a29;
			}
		}
	}
}
</style>
